<template>
    <div>
        <div class="app">
        <!-- 头部 -->
        <div class="header">
            <div class="logo">
                <span class="spanimg" @click="Jump_home"></span>
                <span class="longspan">{{cartoonname}}</span>
            </div>
            <!-- <div class="header-tools">
                <div><span class="ht-btn1"></span></div>
                <div class="header-tools1">
                    <span class="ht-btn2"></span>
                    <div class="header-tools1-1">
                        <div><span class="span1-1"></span><span>书架</span></div>
                        <div><span class="span1-2"></span><span>我的</span></div>
                    </div>
                </div>
                <div><span class="ht-btn3"></span></div>
            </div> -->
        </div>
        <!-- 漫画列表 -->
     <div class="zp-list2">
        <div class="zp-list2-li" v-for="item in moredatalist" :key="item.comic_id" @click="Jump_pre(item.comic_id,item.comic_name)">
          <div class="zp-list2-li1">
            <img :src="item.imgurl" alt="" />
          </div>
          <div class="zp-list2-li2">
            <p>{{ item.comic_name }}</p>
            <div class="zp-list2-li2-s zp-list2-li2-1">
              {{ item.author_name }}
            </div>
            <div class="zp-list2-li2-s zp-list2-li2-2">
              <span v-for="ele in item.cartoon_type_list" :key="ele.id"
                      >{{ ele.name }}&nbsp;</span
                    >
            </div>
            <div class="zp-list2-li2-s zp-list2-li2-3">{{item.comic_feature}}</div>
          </div>
        </div>
      </div>
    
    </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            moredatalist:''
        }
    },
    props:['cartoonname','cartoontype'],
    created() {
        this.getmorelist()
    },
    methods: {
          Jump_home() {
         this.$router.go(-1)
    },
      Jump_pre(id,name){
            this.$emit('getid',id)
          this.$router.push({name:'pre'})
          this.$emit('getcomicname',name)
        },
      getmorelist() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=${this.cartoontype}&rank_type=heat&page=1&pageSize=30`,
        method: "get"
      }).then((data) => {
        console.log(data.data.data.list);
        this.moredatalist = data.data.data.list;
        this.moredatalist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });

      });
    },
    },
         filters:{
        playCountNum(value){ //134567897
            let w = value > 10000?value/10000:value;//万计算
            let y = w > 10000? parseInt(w/10000) +"亿" :parseInt(w) +"万";//亿计算

            return y;
        }
    }
}
</script>
<style scoped>
/* 头部 */
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 53px;
    background-color: #fff;
    padding: 13px 13px 0 13px;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #b3b3b3;
    z-index: 999;
}
.logo{
    width: 130px;
    height: 26.5px;
    margin-right: 80px;
    line-height: 26.5px;
}
.spanimg{
    display: inline-block;
    width: 18px;
    height: 30px;
    background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan{
    font-size: 18px;
    display: inline-block;
    color: #333;
    margin-left: 12px;
    font-weight: 800;
position: relative;
top: -13px;
}
.header-tools{
    width: 40%;
    display: flex;
}
.header-tools>div{
width: 33%;
}
.header-tools>div>span{
    margin-left: 15px;
}
.header-tools1{
    position: relative;
}
/* 显示隐藏 */
.header-tools1-1{
    position: absolute;
    top: 29px;
    left: -15px;
    width: 87.5px;
    height: 104.5px;
    padding: 10px 2.5px 0  2.5px ;
   background: url(../../public/assets/images-index/slide.png);
   background-size: 100% 100%;
   display: none;
}
.header-tools1-1>div{
    line-height: 49.9px;
  margin: 0 12px;
    height: 49.9px;
    font-size: 14px;
    color: #666;
    
}
.header-tools1-1>div:nth-child(1){
    border-bottom: 1px solid rgb(220,220,220);
}
.span1-1,.span1-2{
    position: relative;
    width: 25px;
    height: 24px;
    display: inline-block;
    background-image: url(../../public/assets/images-index/sprite.png);
    top: 3px;
    background-position: 3px 23px;
    background-size: 107.5px 46px;
   
}
.span1-2{
    background-position: -27px 24px;
}
.ht-btn1{
    width: 26px;
    height: 26px;
    display: block;
    background-image: url(../../public/assets/images-index/sprite.png);
    background-position: 3px 0px;
    background-size: 107.5px 46px;
}
.ht-btn2{
    width: 26px;
    height: 26px;
    display: block;
    background-image: url(../../public/assets/images-index/sprite.png);
    background-position: -28px 0px;
    background-size: 107.5px 46px;
}
.ht-btn3{
    width: 26px;
    height: 26px;
    display: block;
    background-image: url(../../public/assets/images-index/sprite.png);
    background-position: -64px 0px;
    background-size: 107.5px 46px;
}
/* 列表模块 */
.zp-list2{
    margin-top: 53px;
}
.zp-list2-li{
    box-sizing: border-box;
    padding: 5px 8px 8px 8px ;
    display: flex;
    background-color: #fff;
    width: 100%;
    height: 115px;
    border-top: 5px solid #f2f2f2;
}
.zp-list2-li1{
    width: 22%;
    height: 100%;
}
.zp-list2-li1 img{
    width: 100%;
    height: 100%;
}
.zp-list2-li2{
    padding: 5px 8px 8px 8px;

}
.zp-list2-li2 p ,.zp-list2-li2 div{
width: 100%;
height: 23px;
}
.zp-list2-li2 p{
    width: 270px;
    color: #333;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zp-list2-li2>div{
    height: 25px;
    line-height: 25px;
color: #999;
font-size: 12px;
margin-left: 10px;
}
.zp-list2-li2-s{
    position:relative;
}
.zp-list2-li2-s::after{
    position: absolute;
    content: '';
    display: block;
    width: 11px;
    height: 12px;
    top: 6px;
    left: -12px;
    background-image: url(../../public/assets/images-index/sprite3.png);
    background-size: 52px 12px;
}
.zp-list2-li2-2::after{
    background-position: -18px 0px;
}
.zp-list2-li2-3::after{
    background-position: 12px 0px;
}
</style>